<script lang="ts" setup>
import { ref } from 'vue'

import AdvancedTable from '@/components/sofastui/AdvancedTable/AdvancedTable.vue'
import AdvancedForm from '@/components/sofastui/AdvancedForm/AdvancedForm.vue'

import { fields, config, formRules } from './constant'

const advancedFormRef = ref()
const advancedTableRef = ref()

// 创建
const handelAdd = () => {
  advancedFormRef.value?.show('add', {})
}

// 行展开
const handelRowExpand = (data: { [key: string]: unknown }) => {
  advancedFormRef.value?.show('update', data)
}

// 刷新表格数据
const refreshTableData = () => {
  advancedTableRef.value!.refresh()
}
</script>

<template>
  <AdvancedTable
    ref="advancedTableRef"
    :fields="fields"
    :config="config"
    @add="handelAdd"
    @rowExpand="handelRowExpand"
  >
  </AdvancedTable>
  <!-- 修改表单 -->
  <AdvancedForm
    ref="advancedFormRef"
    :config="config"
    :rule="formRules"
    @success="refreshTableData"
  />
</template>
